<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./font/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/apply.css">
    <title>报名表</title>
</head>

<body>
    
    <!-- head -->
    <div class="head">
        <h1>校科联</h1>
        <span class="bi-person-square"></span>
    </div>
    


    <!--  page-->
    <div class="page">
        <h3>填写报名表</h3>
        <form action="/apply" method="post" enctype="multipart/form-data">
            <div class="photo">
                
                
               <label for="avatarInput">
                <div class="pic">
                    <img src="./images/profile.jpg" alt="" id="avatarPreview">
                </div>
               </label>
                <input type="file" class="pinput" name="avatar" id="avatarInput" style="display: none;">
            </div>


            <div class="field">
                <span>姓名&nbsp;</span>
                <input type="text" name="name">
            </div>

            <div class="field">
                <span>性别&nbsp;</span>
                <select name="gender" id="">
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
            <div class="field">
                <span>学院&nbsp;</span>
                <select name="college" id="">
                    <option value="">海洋学院</option>
                    <option value="">国际教育学院</option>
                    <option value="">工程学院</option>
                    <option value="">食品学院</option>
                    <option value="">经济管理学院</option>
                    <option value="">公共管理学院</option>
                    <option value="">资源环境学院</option>
                    <option value="">生命科学学院</option>
                    <option value="">动物科学学院</option>
                    <option value="">兽医学院</option>
                    <option value="">园艺学院</option>
                    <option value="">农学院</option>
                    <option value="">林学与风景园林学院</option>
                    <option value="">电子工程学院(人工智能学院)</option>
                    <option value="">水利与土木工程学院</option>
                    <option value="">人文与法学学院</option>
                    <option value="">材料与能源学院</option>
                    <option value="">数学与信息学院(软件学院)</option>
                    <option value="">外国语学院</option>
                    <option value="">艺术学院</option>
                    <option value="">植物保护学院</option>
                    <option value="">马克思主义学院</option>
                    
                </select>
            </div>

            <div class="field">
                <span>专业&nbsp;</span>
                <input type="text" name="major">
            </div>
            <div class="field">
                <span>手机&nbsp;</span>
                <input type="text" name="number">
            </div>
            
            <div class="field">
                <span>第一志愿部门&nbsp;</span>
                <select name="first" id="">
                    <option value="">自科部</option>
                    <option value="">社科部</option>
                    <option value="">办公室</option>
                    <option value="">财务部</option>
                    <option value="">项目部</option>
                    <option value="">外联部</option>
                    <option value="">宣传部</option>
                    <option value="">策划部</option>
                    <option value="">竞赛部</option>
                    <option value="">新闻部</option>
                    <option value="">运营部</option>
                </select>
            </div>
            <div class="field">
                <span>第二志愿部门&nbsp;</span>
                <select name="second" id="">
                    <option value="">自科部</option>
                    <option value="">社科部</option>
                    <option value="">办公室</option>
                    <option value="">财务部</option>
                    <option value="">项目部</option>
                    <option value="">外联部</option>
                    <option value="">宣传部</option>
                    <option value="">策划部</option>
                    <option value="">竞赛部</option>
                    <option value="">新闻部</option>
                    <option value="">运营部</option>
                    <option value="">无</option>
                </select>
            </div>
            <div class="field">
                <span>面试方式&nbsp;</span>
                <select name="way" id="">
                    <option value="">创客空间线下面试</option>
                </select>
            </div>

           
                <textarea name="remark" id="" cols="30" rows="10" placeholder="个人简介(不少于20字)"></textarea>
                <div class="total">
                    0/300字
                </div>
                <div class="intr">作品图片(可选)</div>
                <div class="work">
                    <input type="file" id="one" style="display: none;">
                    <input type="file" id="two" style="display: none;">
                    <input type="file" id="three" style="display: none;">
                    <div class="show">
                        <label for="one">
                            <div class="mod"><img src="./images/work.jpg" alt="" id="workone"></div>
                        </label>
                        <label for="two">
                            <div class="mod"><img src="./images/work.jpg" alt="" id="worktwo"></div>
                        </label>
                        <label for="three">
                            <div class="mod"><img src="./images/work.jpg" alt="" id="workthree"></div>
                        </label>
                    </div>
                </div>
                
            <button type="submit">提交</button>
            
        </form>
    </div>

<div class="func"></div>
    <!-- fixed -->

    <div class="fixed">

        <a href="" class="bi-house-door-fill"></a>
        <a href="" class="bi-bar-chart-fill"></a>
        <a href="" class="bi-envelope"></a>
    </div>


    
    <script src="./bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script>
        const tot=document.querySelector('.total')
        const txt=document.querySelector('textarea')
        txt.addEventListener('input',()=>{
            tot.innerHTML=`${txt.value.length}/300字`
        })

        
    </script>
</body>

</html>